<template>
  <view class="live-container">
    <!-- 使用video组件观看直播 -->
    <!-- #ifndef H5 -->
    <video
      :src="pullurl"
      style="width: 300px; height: 225px"
      :controls="true"
      object-fit="contain"
      loop
      :is-live="true"
      :autoplay="true"
      :show-center-play-btn="true"
      :enable-progress-gesture="true"
      :show-fullscreen-btn="true"
      @error="onPlayError"
      @play="onVideoPlay"
      @pause="onVideoPause"
    ></video>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <h5Player
      ref="h5play"
      :autoplay="true"
      :playsinline="true"
      :source="pullurl"
      :height="screenHeight + 'px'"
      :videoHeight="screenHeight + 'px'"
      :width="screenWidth + 'px'"
      videoWidth="auto"
      :skinLayout="skinLayout"
      :preload="true"
      :isLive="true"
      aliplayerSdkPath="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"
    ></h5Player>
    <!-- #endif -->
    <view class="debug-info">
      <text>直播地址: {{ pullurl }}</text>
    </view>
  </view>
</template>

<script>
  // #ifdef H5
  import h5Player from './zujian/h5-play';
  // #endif
  export default {
    components: {
      h5Player,
    },
    data() {
      return {
        pullurl: '',
        screenHeight: '600',
        screenWidth: '600',
        skinLayout: [{ name: 'bigPlayButton', align: 'blabs', x: this.screenWidth / 2 - 30, y: this.screenHeight / 2 - 30 }],
      };
    },
    onLoad(e) {
      if (e && e.pullurl) {
        this.pullurl = decodeURIComponent(e.pullurl);
        console.log('直播流地址:', this.pullurl);
      } else {
        // 测试用直播地址，使用有效的RTMP或HLS直播流地址
        this.pullurl = 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv';
        // 也可以尝试以下备用地址
        // this.pullurl = 'https://www.w3schools.com/html/mov_bbb.mp4'; // 普通MP4视频
        // this.pullurl = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'; // HLS流
        console.log('使用测试直播地址:', this.pullurl);
      }
      
      // #ifdef H5
      this.$nextTick(() => {
        if (this.$refs.h5play) {
          console.log('初始化H5播放器');
          try {
            this.$refs.h5play.start();
            console.log('H5播放器初始化成功');
          } catch (error) {
            console.error('H5播放器初始化失败:', error);
          }
        } else {
          console.error('H5播放器引用不存在');
        }
      });
      // #endif
    },
    methods: {
      onPlayError(e) {
        console.error('直播播放错误:', e);
        // 打印更详细的错误信息
        if (e && e.detail) {
          console.error('错误详情:', JSON.stringify(e.detail));
        }
        uni.showToast({
          title: '播放出错，请稍后重试',
          icon: 'none',
          duration: 3000
        });
        
        // 尝试重新加载视频
        setTimeout(() => {
          console.log('尝试重新加载视频');
          // 可以在这里添加重新加载逻辑
        }, 3000);
      },
      onVideoPlay(e) {
        console.log('视频开始播放', e);
      },
      onVideoPause(e) {
        console.log('视频暂停播放', e);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .live-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  video {
    background-color: #000;
  }

  .debug-info {
    margin-top: 10px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    width: 300px;
    word-break: break-all;
  }
</style>
